<template>
    <div class="container">
        <!-- 位置 -->
        <div class="position-x mt20 flex-align">
            <span>您的位置：首页</span>
            <span>></span>
            <span>游戏</span>
        </div>
        <!-- yboxa -->
        <div class="yboxa box10 mt20 pt16 pl20 pb16" v-if="gameCollection.length > 0">
            <div class="yboxa-t">
                <div class="yboxa-tl" v-for="(item, index) in gameCollection" :key="index">
                    <nuxt-link :to="'/game/' + item.id">
                        <img class="img100" src="~/assets/images/img2.png" alt="" srcset="">
                    </nuxt-link>
                </div>
            </div>
            <ul class="yboxa-b mt10">
                <li :class="{ active: item.id == id, prev: index === (navCurrent - 1) }"
                    v-for="(item, index) in gameClassify" :key="index">
                    <nuxt-link v-if="item.id == 0" to="/game">
                        {{ item.name }}
                    </nuxt-link>
                    <nuxt-link v-else :to="'/game/' + item.id">
                        {{ item.name }}
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- yboxb -->
        <div class="yboxb flex-align mt20">
            <span :class="{ active: index === filterCurrent }" @click="filterClick(item, index)"
                v-for="(item, index) in filterList" :key="index">{{ item.name }}</span>
        </div>
        <!-- yboxc -->
        <div class="yboxc">
            <ul v-if="dataList.length > 0">
                <li v-for="(item, index) in dataList" :key="index">
                    <nuxt-link :to="'/game/details' + item.id">
                        <div class="yboxc-img">
                            <img class="img100" :src="$used.imgUrl(item.game_icon)" alt="">
                        </div>
                        <div class="yboxc-a">
                            <h3>{{ item.game_name }}</h3>
                            <p>{{ item.create_time }}</p>
                        </div>
                        <div class="yboxc-b">
                            <div>立即下载</div>
                            <p>{{ item.language }}/{{ item.game_size }}</p>
                        </div>
                    </nuxt-link>
                </li>
            </ul>
        </div>
        <!-- pagination -->
        <div class="box10 pt16 pb16 flex-center-align mt20">
            <el-pagination background layout="prev, pager, next" v-model:current-page="params.page"
                :page-size="params.size" :total="total" @current-change="handleCurrentChange" />
        </div>
        <!--  -->
    </div>
</template>
<script setup>
const websiteStore = useWebsiteStore();// 使用 store 实例
const { gameClassify } = storeToRefs(websiteStore);// 解构赋值并保持响应性
const { gameCollection } = storeToRefs(websiteStore);// 解构赋值并保持响应性
const { $api, $used } = useNuxtApp()
const route = useRoute()
const props = defineProps({
    pageInfo: {
        type: Object,
        default: () => ({})
    }
})
let id = ref(route.params.id);
console.log(id.value, '-----id')

//初始化处理数据业务
const initData = async () => {
    console.log(gameClassify.value, '*-----gameClassify')
    console.log(gameCollection.value.length, '*-----gameCollection')
    console.log(pageInfo, '*----1111111-gameCollection')
    //没有子菜单时
    if (gameCollection.value.length == 0) {
        await websiteStore.gameTag({ group_id: id })
    }
    //获取分类
    //子页面
    if (id) {
    } else {
        //类型菜单首页
    }
}
initData();


let dataList = ref([]);
let params = reactive({
    page: 1,
    size: 36,
    tag: id.value,
    filter: 1,//0:最新 1:热门 2:推荐
})
let total = ref(0);
//获取列表
const getList = () => {
    $api.gameList(params).then(res => {
        let list = res.data;
        $used.timeTostr(list, '', 1);
        dataList.value = list;
        total.value = res.data.total;
    })
}
console.log(id.value, '-----id') // 应输出 "book"
if (id) {
    getList();
}
/* pinia */
// import { useWebsiteStore } from '~/stores/gameStore'
// import { storeToRefs } from 'pinia'

// 判断是否为空并调用接口

getList();


//
let navCurrent = ref(0);//当前选中标签

if (id.value == undefined) {
    id.value = 0;
}
//
gameClassify.value.forEach((item, index) => {
    if (item.id == id.value) {
        navCurrent.value = index;
    }
})
/* 菜单选择 */
// let gameCollection = ref([]);//集合数据
//获取数据 类型:opt1=手游,opt2=h5,opt3=手机软件
// $api.gameTog({ type: 1 }).then(res => {
//     gameClassify.value = res.data.tag;
//     gameCollection.value = res.data.gameCollection;
//     gameClassify.value.unshift({ id: 0, name: '全部游戏' })
//     gameClassify.value.forEach((item, index) => {
//         if (item.id == id.value) {
//             navCurrent.value = index;
//             params.filter = item.id;
//         }
//     })
// })
//点击标签菜单
const navClick = (item, index) => {
    navCurrent.value = index;
    params.filter = item.id;
}
/* 筛选 */
let filterList = ref(
    [
        { id: 1, name: '最新' },
        { id: 2, name: '热门' },
        { id: 3, name: '推荐' }
    ]
)
let filterCurrent = ref(0);
//点击筛选
const filterClick = (item, index) => {
    filterCurrent.value = index;
    params.filter = item.id;
    getList();
}

//切换页码时变化
const handleCurrentChange = (val) => {
    params.page = val;
    getList();
}
</script>
<style lang="scss" scoped>
.position-x {
    position: relative;
    padding: 0 22px;
    height: 44px;
    background: #FFFFFF;
    font-size: 14px;
    color: #626262;
}

/* yboxa */
.yboxa {
    .yboxa-t {
        .yboxa-tl {
            margin-right: 12px;
            display: inline-block;
            width: 220px;
            height: 166px;
            border-radius: 10px;
            overflow: hidden;
        }
    }

    .yboxa-b {
        li {
            position: relative;
            display: inline-block;
            margin-top: 14px;
            width: 112px;
            height: 35px;
            text-align: center;
            line-height: 35px;
            border-radius: 4px;
            font-size: 16px;
            color: #333333;
            cursor: pointer;

            a {
                display: block;
            }

            &::after {
                position: absolute;
                content: '';
                top: 50%;
                right: 0;
                margin-top: -11px;
                width: 1px;
                height: 22px;
                background-color: #BBBBBB;
            }


            &.active {
                background: #FF8E2B;
                font-size: 18px;
                color: #fff;

                a {
                    color: #fff;
                }

                &::after {
                    display: none;
                }
            }

            &.prev {
                &::after {
                    display: none;
                }
            }
        }
    }
}

/* yboxb */
.yboxb {
    position: relative;
    padding-left: 20px;
    height: 64px;
    background: #FFFFFF;

    span {
        display: inline-block;
        width: 72px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        font-size: 16px;
        color: #494949;
        border-radius: 5px;
        font-weight: bold;

        &.active {
            background-color: #FF8E2B;
            color: #ffffff;
        }
    }
}

/* yboxc */
.yboxc {
    ul {
        margin-top: -6px;
        padding-left: 20px;

        li {
            margin-top: 32px;
            margin-right: 13px;
            display: inline-block;

            a {
                display: block;
                width: 182px;
                height: 246px;
                text-align: center;
                background: #FFFFFF;
                padding: 30px 0 0 0;
                border-radius: 10px;
                overflow: hidden;

                .yboxc-img {
                    margin: 0 auto;
                    width: 122px;
                    height: 122px;
                    border-radius: 10px;
                    overflow: hidden;

                    img {
                        transition: all .3s;
                    }
                }

                &:hover {
                    .yboxc-img {
                        img {
                            transform: scale(1.1);
                        }
                    }

                    .yboxc-a {
                        display: none;
                    }

                    .yboxc-b {
                        display: block;
                    }
                }

                .yboxc-a {
                    h3 {
                        margin-top: 14px;
                        font-size: 14px;
                        color: #333333;
                        line-height: 20px;
                    }

                    p {
                        margin-top: 8px;
                        font-size: 12px;
                        color: #333333;
                        line-height: 22px;
                    }
                }

                .yboxc-b {
                    display: none;

                    div {
                        margin: 12px auto 0;
                        width: 96px;
                        height: 24px;
                        text-align: center;
                        line-height: 24px;
                        background: #FF8E2B;
                        border-radius: 2px;
                        font-size: 14px;
                        color: #FFFFFF;
                    }

                    p {
                        margin-top: 6px;
                        font-size: 12px;
                        color: #757575;
                        line-height: 22px;
                    }
                }
            }
        }
    }
}
</style>